<div class="card">
<div class="tree root">
    {{.tree}}
</div>
</div>
<script id="script-tree">
    regInitFun('script-tree',function(){
        document.querySelectorAll('.tree .children').forEach(c=>{
            // 选择所有直属的元素子元素
            var nodes = Array.prototype.filter.call(c.children, function(child) {
                return child.nodeType === Node.ELEMENT_NODE;
            });
            //计算span的距离之和
            var width = 0;
            var offsetLeftArr = [];
            nodes.forEach(node=>{
                var spans = Array.prototype.filter.call(node.children,function(child){
                    return child.tagName=='SPAN'
                })
                offsetLeftArr.push(spans[0].offsetLeft)
            })
            var max = Math.max(...offsetLeftArr)
            var min = Math.min(...offsetLeftArr)
            var left = min;
            if(nodes.length>0 && nodes[0].children){
                var spans = Array.prototype.filter.call(nodes[0].children,function(child){
                    return child.tagName == 'SPAN';
                })
                var diff = spans[0].offsetWidth/2
                left += diff;
            }
            width = max - min;
            var line = document.createElement('div');
            line.style.width=width+'px';
            line.style.height=0;
            line.style.position='absolute';
            line.style.left = left +'px';
            line.style.overflow='hidden';
            line.style.borderTop='1px solid #999';
            line.style.top = '-29px';
            c.appendChild(line);
        })
    })
</script>